/** 
     @type {HTMLCanvasElement}
 */
let canvas, context, canvasWidth, canvasHeigh;
let endTime, curShowTimeSeconds = 0;
let r = 6;
let marginLeft = 10, marginTop = 10;
let balls = [];
let colors = ["red", "blue", "yellow", "green", "sky", "gray", "pink", "orange"];
// 七巧板的各顶点路径及颜色
let digit = [
   //0
   [
      [0, 0, 1, 1, 1, 0, 0],
      [0, 1, 1, 0, 1, 1, 0],
      [1, 1, 0, 0, 0, 1, 1],
      [1, 1, 0, 0, 0, 1, 1],
      [1, 1, 0, 0, 0, 1, 1],
      [1, 1, 0, 0, 0, 1, 1],
      [1, 1, 0, 0, 0, 1, 1],
      [1, 1, 0, 0, 0, 1, 1],
      [0, 1, 1, 0, 1, 1, 0],
      [0, 0, 1, 1, 1, 0, 0]
   ],
   //1
   [
      [0, 0, 0, 1, 1, 0, 0],
      [0, 1, 1, 1, 1, 0, 0],
      [0, 0, 0, 1, 1, 0, 0],
      [0, 0, 0, 1, 1, 0, 0],
      [0, 0, 0, 1, 1, 0, 0],
      [0, 0, 0, 1, 1, 0, 0],
      [0, 0, 0, 1, 1, 0, 0],
      [0, 0, 0, 1, 1, 0, 0],
      [0, 0, 0, 1, 1, 0, 0],
      [1, 1, 1, 1, 1, 1, 1]
   ],
   //2
   [
      [0, 1, 1, 1, 1, 1, 0],
      [1, 1, 0, 0, 0, 1, 1],
      [0, 0, 0, 0, 0, 1, 1],
      [0, 0, 0, 0, 1, 1, 0],
      [0, 0, 0, 1, 1, 0, 0],
      [0, 0, 1, 1, 0, 0, 0],
      [0, 1, 1, 0, 0, 0, 0],
      [1, 1, 0, 0, 0, 0, 0],
      [1, 1, 0, 0, 0, 1, 1],
      [1, 1, 1, 1, 1, 1, 1]
   ],
   //3
   [
      [1, 1, 1, 1, 1, 1, 1],
      [0, 0, 0, 0, 0, 1, 1],
      [0, 0, 0, 0, 1, 1, 0],
      [0, 0, 0, 1, 1, 0, 0],
      [0, 0, 1, 1, 0, 0, 0],
      [0, 0, 0, 1, 1, 0, 0],
      [0, 0, 0, 0, 1, 1, 0],
      [0, 0, 0, 0, 0, 1, 1],
      [1, 1, 0, 0, 0, 1, 1],
      [1, 1, 1, 1, 1, 1, 1]
   ],
   //4
   [
      [0, 0, 0, 0, 1, 1, 0],
      [0, 0, 0, 1, 1, 1, 0],
      [0, 0, 1, 1, 1, 1, 0],
      [0, 1, 1, 0, 1, 1, 0],
      [1, 1, 0, 0, 1, 1, 0],
      [1, 1, 1, 1, 1, 1, 1],
      [0, 0, 0, 0, 1, 1, 0],
      [0, 0, 0, 0, 1, 1, 0],
      [0, 0, 0, 0, 1, 1, 0],
      [0, 0, 0, 1, 1, 1, 1]
   ],
   //5
   [
      [1, 1, 1, 1, 1, 1, 1],
      [1, 1, 0, 0, 0, 0, 0],
      [1, 1, 0, 0, 0, 0, 0],
      [1, 1, 1, 1, 1, 1, 0],
      [0, 0, 0, 0, 0, 1, 1],
      [0, 0, 0, 0, 0, 1, 1],
      [0, 0, 0, 0, 0, 1, 1],
      [0, 0, 0, 0, 0, 1, 1],
      [1, 1, 0, 0, 0, 1, 1],
      [1, 1, 1, 1, 1, 1, 1]
   ],
   //6
   [
      [0, 0, 0, 0, 1, 1, 0],
      [0, 0, 1, 1, 0, 0, 0],
      [0, 1, 1, 0, 0, 0, 0],
      [1, 1, 0, 0, 0, 0, 0],
      [1, 1, 0, 1, 1, 1, 0],
      [1, 1, 0, 0, 0, 1, 1],
      [1, 1, 0, 0, 0, 1, 1],
      [1, 1, 0, 0, 0, 1, 1],
      [1, 1, 0, 0, 0, 1, 1],
      [0, 1, 1, 1, 1, 1, 0]
   ],
   //7
   [
      [1, 1, 1, 1, 1, 1, 1],
      [1, 1, 0, 0, 0, 1, 1],
      [0, 0, 0, 0, 1, 1, 0],
      [0, 0, 0, 0, 1, 1, 0],
      [0, 0, 0, 1, 1, 0, 0],
      [0, 0, 0, 1, 1, 0, 0],
      [0, 0, 1, 1, 0, 0, 0],
      [0, 0, 1, 1, 0, 0, 0],
      [0, 0, 1, 1, 0, 0, 0],
      [0, 0, 1, 1, 0, 0, 0]

   ],
   //8
   [
      [0, 1, 1, 1, 1, 1, 0],
      [1, 1, 0, 0, 0, 1, 1],
      [1, 1, 0, 0, 0, 1, 1],
      [1, 1, 0, 0, 0, 1, 1],
      [0, 1, 1, 1, 1, 1, 0],
      [1, 1, 0, 0, 0, 1, 1],
      [1, 1, 0, 0, 0, 1, 1],
      [1, 1, 0, 0, 0, 1, 1],
      [1, 1, 0, 0, 0, 1, 1],
      [0, 1, 1, 1, 1, 1, 0]

   ],
   //9
   [
      [0, 1, 1, 1, 1, 1, 0],
      [1, 1, 0, 0, 0, 1, 1],
      [1, 1, 0, 0, 0, 1, 1],
      [1, 1, 0, 0, 0, 1, 1],
      [0, 1, 1, 1, 0, 1, 1],
      [0, 0, 0, 0, 0, 1, 1],
      [0, 0, 0, 0, 0, 1, 1],
      [0, 0, 0, 0, 1, 1, 0],
      [0, 0, 0, 1, 1, 0, 0],
      [0, 1, 1, 0, 0, 0, 0]

   ],
   //:
   [
      [0, 0, 0, 0],
      [0, 0, 0, 0],
      [0, 1, 1, 0],
      [0, 1, 1, 0],
      [0, 0, 0, 0],
      [0, 0, 0, 0],
      [0, 1, 1, 0],
      [0, 1, 1, 0],
      [0, 0, 0, 0],
      [0, 0, 0, 0],


   ],
];
function $$(selector) {
   return document.querySelector(selector);
}

/* 
获取用户设置的时间，并设置为结束时间
如果不能正确获取，就设置默认时间为15:30:0
 */
function setEndTime(time = { hh: 15, mm: 29, ss: 59 }) {
   let timeStr = $$("#txtEndTime").value;
   let temp = timeStr.split(":");
   endTime = new Date();
   endTime.setHours(temp[0] || time.hh);
   endTime.setMinutes(temp[1] || time.mm);
   endTime.setSeconds(temp[2] || time.ss);
}
/* 
初始化:
   自适用画布大小，数字小圆圈的半径
*/
function init() {
   canvas = $$("#canvas");
   //设置画布宽 屏幕宽-30，最大800
   canvasWidth = Math.min(800, window.innerWidth - 30);
   canvasHeigh = canvasWidth * 9 / 16;//根据宽设置高，16:9的比例
   canvas.width = canvasWidth;
   canvas.height = canvasHeigh;
   //获取画布上下文对象
   context = canvas.getContext("2d");

   //根据画布大小，自适应小圆圈大小
   r = (canvasWidth - 9 * marginLeft) / (6 * 7 + 2 * 4) / 2;
}
/* 获取当时间到指定结束时间的时间差（精度秒） */
function getCurrentShowTimeSeconds() {
   let curTime = new Date();
   let diff = endTime.getTime() - curTime.getTime();
   diff = Math.round(diff / 1000);
   //如果为负数，设置为0
   return diff >= 0 ? diff : 0;
}
/* 
   渲染
*/
function render() {
   clear();//清屏

   let hh = parseInt(curShowTimeSeconds / 3600);
   let mm = parseInt((curShowTimeSeconds - hh * 3600) / 60);
   let ss = parseInt(curShowTimeSeconds % 60);

   //渲染倒计时间
   renderDigit({ x: marginLeft, y: marginTop }, parseInt(hh / 10));
   renderDigit({ x: 2 * marginLeft + 7 * 2 * r, y: marginTop }, parseInt(hh % 10));
   renderDigit({ x: 3 * marginLeft + 14 * 2 * r, y: marginTop }, 10);
   renderDigit({ x: 4 * marginLeft + 18 * 2 * r, y: marginTop }, parseInt(mm / 10));
   renderDigit({ x: 5 * marginLeft + 25 * 2 * r, y: marginTop }, parseInt(mm % 10));
   renderDigit({ x: 6 * marginLeft + 32 * 2 * r, y: marginTop }, 10);
   renderDigit({ x: 7 * marginLeft + 36 * 2 * r, y: marginTop }, parseInt(ss / 10));
   renderDigit({ x: 8 * marginLeft + 43 * 2 * r, y: marginTop }, parseInt(ss % 10));

   //渲染小球
   for (let i = 0; i < balls.length; i++) {
      context.fillStyle = balls[i].color;
      context.beginPath();
      context.arc(balls[i].x, balls[i].y, r - 1, 0, 2 * Math.PI);
      context.closePath();
      context.fill();
   }
}
/* 
在指定位置,渲染指定数字
p为坐标对象，有x,y两个属性
每个数字由一7*10的矩阵组成，二重循环由行到列，从左向右，逐个渲染
*/
function renderDigit(p, num) {
   context.fillStyle = "#FFAA25";
   for (let i = 0; i < digit[num].length; i++) {
      for (let j = 0; j < digit[num][i].length; j++) {
         if (digit[num][i][j] == 1) {
            context.beginPath();
            context.arc(p.x + j * 2 * r + r, p.y + i * 2 * r + r, r - 1, 0, 2 * Math.PI);
            context.closePath();
            context.fill();
         }
      }
   }
}
/* 
   根据数字矩阵，添加彩色小球，设置每个球的初始位置，速度（vx,vy,g)，颜色
   最后添加到小球数组中
*/
function addBalls(x, y, num) {
   for (let i = 0; i < digit[num].length; i++) {
      for (let j = 0; j < digit[num][i].length; j++) {
         if (digit[num][i][j] == 1) {
            let ball = {
               x: x + j * 2 * r + r,//坐标x
               y: y + i * 2 * r + r,//坐标y
               g: 1.5 + Math.random(),//加速度
               vx: Math.random() > 0.5 ? -4 : 4,//左右方向
               vy: -5,//向上弹跳
               color: colors[Math.floor(Math.random() * colors.length)]//随机颜色
            };
            balls.push(ball);
         }
      }
   }
}
//清空画布
function clear() {
   context.clearRect(0, 0, canvasWidth, canvasHeigh);
}
/* 
   更新时间和小球
*/
function update() {
   //显示当前日期时间
   $$("#now").innerText = new Date().toLocaleString();

   let hh = parseInt(curShowTimeSeconds / 3600);
   let mm = parseInt((curShowTimeSeconds - hh * 3600) / 60);
   let ss = parseInt(curShowTimeSeconds % 60);

   let nextCurShowTimeSeconds = getCurrentShowTimeSeconds();
   let nexthh = parseInt(nextCurShowTimeSeconds / 3600);
   let nextmm = parseInt((nextCurShowTimeSeconds - hh * 3600) / 60);
   let nextss = parseInt(nextCurShowTimeSeconds % 60);

   //如果显示的当前时间与下一个时间不同，就更新
   if (nextCurShowTimeSeconds != curShowTimeSeconds) {
      //判断每个时间数字是不是有变化，有变化就加小球
      if (parseInt(hh / 10) != parseInt(nexthh / 10)) {
         addBalls(marginLeft + 0, marginTop, parseInt(hh / 10));
      }
      if (parseInt(hh % 10) != parseInt(nexthh % 10)) {
         addBalls(2 * marginLeft + 7 * 2 * r, marginTop, parseInt(ss % 10))
      }
      if (parseInt(mm / 10) != parseInt(nextmm / 10)) {
         addBalls(4 * marginLeft + 18 * 2 * r, marginTop, parseInt(mm / 10))
      }
      if (parseInt(mm % 10) != parseInt(nextmm % 10)) {
         addBalls(5 * marginLeft + 25 * 2 * r, marginTop, parseInt(mm % 10))
      }
      if (parseInt(ss / 10) != parseInt(nextss / 10)) {
         addBalls(7 * marginLeft + 36 * 2 * r, marginTop, parseInt(ss / 10))
      }
      if (parseInt(ss % 10) != parseInt(nextss % 10)) {
         addBalls(8 * marginLeft + 43 * 2 * r, marginTop, parseInt(ss % 10));
      }
      //更新当前要显示的时间
      curShowTimeSeconds = getCurrentShowTimeSeconds();
   }
   //更新彩色小球
   updateBalls();
}
/* 
   更新彩色小球的位置
*/
function updateBalls() {

   for (let i = 0; i < balls.length; i++) {
      balls[i].x += balls[i].vx;
      balls[i].y += balls[i].vy;
      balls[i].vy += balls[i].g;//向下加速度

      //如果倒低就反弹
      if (balls[i].y > canvasHeigh - r) {
         balls[i].y = canvasHeigh - r;
         balls[i].vy = -balls[i].vy * 0.75;//增加摩擦系数，越来越矮
      }
   }

   /* 删除已经滚出屏幕的小球 */
   //没有滚出屏幕的位置向前移
   let cnt = 0;
   for (let i = 0; i < balls.length; i++) {
      if (balls[i].x - r > 0 && balls[i].x + r < canvasWidth)
         balls[cnt++] = balls[i];
   }
   //弹出不在屏幕范围内的小球
   while (balls.length > cnt) {
      balls.pop();
   }
}
// function   animation(){
//    render();
//    update();
//    requestAnimationFrame(animation);
// }

window.onload = function () {
   init();//初始化
   setEndTime();//设置结束时间
   curShowTimeSeconds = getCurrentShowTimeSeconds();//计算时间差
   //定义调用
   window.setInterval(() => {
      render();
      update();
   }, 60);

   //时间发生变动就更新结束时间
   $$("#txtEndTime").onblur = function () {
      setEndTime();
   }
   //自适应窗口大小的调整
   window.onresize = function () {
      init();
   }
   // animation();
}